<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>海洋牧场监测系统</title>
    <style>
        body {
    margin: 0;
    font-family: "Microsoft YaHei", sans-serif;
    background-color: white;
    color: #fff;
  }
        .navbar {
    background-color: #003366;
    padding: 10px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .navbar h1 {
    font-size: 20px;
    margin: 0;
  }
  .navbar ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .navbar ul li {
    margin: 0 15px;
  }
  .navbar ul li a {
    color: #fff;
    text-decoration: none;
  }
  .navbar .username,
  .exit {
    margin-left: 20px;
  }

        .main-content {
            max-width: 1200px;
            margin: 20px auto;
            padding: 0 20px;
        }

        .content-header {
            margin-bottom: 30px;
        }

        .content-header h2 {
            font-size: 24px;
            color: #333;
        }

        .content-body {
            display: flex;
            gap: 20px;
        }

        .video-container {
            flex: 1;
            background-color: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .video-container video {
            width: 100%;
            display: block;
        }

        .video-info {
            padding: 15px;
        }

        .video-info h3 {
            font-size: 18px;
            margin-bottom: 10px;
        }

        .video-info .info-item {
            display: flex;
            align-items: center;
            padding: 10px;
            background-color: #f0f8ff;
            border-radius: 4px;
            margin-bottom: 10px;
        }

        .video-info .info-item i {
            margin-right: 10px;
            color: #0066cc;
        }

        .status-container {
            flex: 1;
            background-color: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .status-container h3 {
            font-size: 18px;
            margin-bottom: 15px;
        }

        .status-item {
            background-color: #f0f8ff;
            border-radius: 4px;
            padding: 15px;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
        }

        .status-item i {
            margin-right: 10px;
            color: #0066cc;
        }

        .score-container {
            flex: 1;
            background-color: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .score-container h3 {
            font-size: 18px;
            margin-bottom: 15px;
        }

        .score-info {
            background-color: #f0f8ff;
            border-radius: 4px;
            padding: 15px;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
        }

        .score-info i {
            margin-right: 10px;
            color: #0066cc;
        }

        .score-stars {
            display: flex;
            margin-top: 10px;
        }

        .star {
            color: #ffcc00;
            font-size: 24px;
        }

        .star.empty {
            color: #ddd;
        }

                .image-recognition {
            flex: 1;
            min-width: 300px;
            background-color: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .image-recognition h3 {
            font-size: 18px;
            margin-bottom: 15px;
            color: #003366;
        }

        .upload-container {
            border: 2px dashed #0066cc;
            border-radius: 8px;
            padding: 20px;
            text-align: center;
            margin-bottom: 20px;
            cursor: pointer;
        }

        .upload-container p {
            margin: 15px 0;
            color: #0066cc;
        }

        .upload-container i {
            font-size: 40px;
            color: #0066cc;
            margin-bottom: 10px;
        }

        .upload-container input[type="file"] {
            display: none;
        }

        .upload-btn {
            background-color: #0066cc;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }

        .upload-btn:hover {
            background-color: #004c99;
        }

        .result-container {
            background-color: #f0f8ff;
            border-radius: 8px;
            padding: 15px;
            margin-top: 20px;
            display: none;
        }

        .result-container h4 {
            margin-top: 0;
            color: #003366;
        }

        .fish-info {
            display: flex;
            margin-top: 10px;
        }

        .fish-image {
            max-width: 200px;
            max-height: 200px;
            border-radius: 4px;
            margin-right: 20px;
        }

        .fish-details {
            flex: 1;
        }

        .fish-details p {
            margin: 5px 0;
        }

        .fish-type {
            font-weight: bold;
        }
        .fish-details p {
        margin: 5px 0;
        color: #333; /* 设置字体颜色为深灰色，接近黑色 */
    }

    .result-text {
        color: #000; /* 设置字体颜色为黑色 */
    }

        .length-prediction {
            margin-top: 15px;
        }

        .length-bar {
            width: 100%;
            background-color: #e0e0e0;
            border-radius: 4px;
            height: 20px;
            margin-top: 5px;
            overflow: hidden;
        }

        .length-fill {
            height: 100%;
            background-color: #4caf50;
            border-radius: 4px;
            width: 0%;
        }

        .clear-btn {
            background-color: #f44336;
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 4px;
            cursor: pointer;
            margin-top: 15px;
        }

        .clear-btn:hover {
            background-color: #d32f2f;
        }

        .analyze-btn {
            background-color: #003366;
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 4px;
            cursor: pointer;
            margin-top: 15px;
        }

        .analyze-btn:hover {
            background-color: #00234d;
        }
                .ai-chat-widget {
            flex: 1;
            background-color: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .ai-chat-widget h3 {
            font-size: 18px;
            margin-bottom: 15px;
            color: #003366;
        }

        .chat-container {
            height: 300px;
            background-color: #f9f9f9;
            border-radius: 4px;
            padding: 15px;
            margin-bottom: 15px;
            overflow-y: auto;
        }

        .chat-message {
            margin-bottom: 15px;
            padding: 10px;
            border-radius: 5px;
        }

        .user-message {
            background-color: #2121ba;
            text-align: right;
        }

        .bot-message {
            background-color: #070707;
        }

        .input-container {
            display: flex;
        }

        .input-container input[type="text"] {
            flex: 1;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px 0 0 4px;
        }

        .input-container button {
            background-color: #0066cc;
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 0 4px 4px 0;
            cursor: pointer;
        }

        .input-container button:hover {
            background-color: #004c99;
        }
    </style>
</head>
<body>
    <div class="navbar">
        <div><h1>海洋牧场监测系统</h1></div>
        <ul>
                
                    <li><a href="{{ url_for('tomain') }}"><i class="home-icon"></i> 首页</a></li>
                
                
                    <li><a href="{{ url_for('todata') }}"><i class="data-icon"></i> 主要信息</a></li>
                
                
                    <li><a href="{{ url_for('towater') }}"><i class="underwater-icon"></i> 水下系统</a></li>
               
                    <li><a href="{{ url_for('toai') }}"><i class="ai-icon"></i> 智能中心</a></li>
                    {% if userrole=="admin" %}
                    <li><a href="{{ url_for('toadadmin') }}"><i class="admin-icon"></i> 管理员</a></li>
                    {% endif %}
        </ul>
       
        <div >
            <ul><li><a href="{{ url_for('topersonal') }}" class="username"><i class="user-icon"></i> {{ username }} </a></li>
            <li><a href="{{ url_for('exit') }}" class="exit"><i class="exit-icon"></i> 退出</a>
            </li></ul>
            
        </div>
    </div>
    <div class="main-content">
               <div class="image-recognition">
                <h3>鱼类识别与体长预测</h3>
                <div class="upload-container" id="uploadContainer">
                    <i>📷</i>
                    <p>点击或拖拽上传鱼类图片</p>
                    <input type="file" id="imageUpload" accept="image/*">
                    <button class="upload-btn">选择图片</button>
                </div>
                
                <div class="result-container" id="resultContainer">
                    <h4>识别结果</h4>
                    <div class="fish-info">
                        <img id="fishImage" class="fish-image" src="" alt="识别的鱼类">
                        <div class="fish-details">
                            <p class="fish-type result-text">识别的鱼类: <span id="fishType">-</span></p>
                            <p class="result-text">相似度: <span id="similarity">-</span>%</p>
                            <div class="length-prediction">
                                <p class="result-text">预测体长: <span id="predictedLength">-</span></p>
                                <div class="length-bar">
                                    <div class="length-fill" id="lengthFill"></div>
                                </div>
                                <p class="result-text">体长范围: 0-60 cm</p>
                            </div>
                        </div>
                    </div>
                    <button class="clear-btn" id="clearBtn">清除结果</button>
                </div>
                <div class="ai-chat-widget">
                <h3>智能问答助手</h3>
                <div class="chat-container" id="chatContainer">
                    <div class="chat-message bot-message">
                        您好！我是海洋牧场智能问答助手，请问有什么可以帮助您的吗？
                    </div>
                </div>
                <div class="input-container">
                    <input type="text" id="userInput" placeholder="请输入您的问题...">
                    <button id="sendMessage">发送</button>
                </div>
            </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const uploadContainer = document.getElementById('uploadContainer');
            const imageUpload = document.getElementById('imageUpload');
            const resultContainer = document.getElementById('resultContainer');
            const fishImage = document.getElementById('fishImage');
            const fishType = document.getElementById('fishType');
            const similarity = document.getElementById('similarity');
            const predictedLength = document.getElementById('predictedLength');
            const lengthFill = document.getElementById('lengthFill');
            const clearBtn = document.getElementById('clearBtn');
            
            // 上传区域点击事件
            uploadContainer.addEventListener('click', function() {
                imageUpload.click();
            });
            
            // 拖放功能
            uploadContainer.addEventListener('dragover', function(e) {
                e.preventDefault();
                uploadContainer.style.backgroundColor = '#e0f7fa';
            });
            
            uploadContainer.addEventListener('dragleave', function() {
                uploadContainer.style.backgroundColor = '';
            });
            
            uploadContainer.addEventListener('drop', function(e) {
                e.preventDefault();
                uploadContainer.style.backgroundColor = '';
                
                if (e.dataTransfer.files.length) {
                    handleImageUpload(e.dataTransfer.files[0]);
                }
            });
            
            // 文件选择事件
            imageUpload.addEventListener('change', function() {
                if (this.files.length) {
                    handleImageUpload(this.files[0]);
                }
            });
            
            function handleImageUpload(file) {
                if (!file.type.match('image.*')) {
                    alert('请上传图片文件');
                    return;
                }
                
                const reader = new FileReader();
                
                reader.onload = function(e) {
                    fishImage.src = e.target.result;
                };
                
                reader.readAsDataURL(file);
                
                // 通过AJAX发送文件到后端
                const formData = new FormData();
                formData.append('file', file);
                
                fetch('/predict', {
                    method: 'POST',
                    body: formData
                })
                .then(response => response.json())
                .then(data => {
                    // 显示结果
                    resultContainer.style.display = 'block';
                    
                    fishType.textContent = data.fish_type;
                    similarity.textContent = data.similarity;
                    predictedLength.textContent = data.predicted_length;
                    
                    // 设置长度条
                    const length = parseInt(data.predicted_length);
                    lengthFill.style.width = `${(length / 60) * 100}%`;
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('预测失败，请重试');
                });
            }
            
            // 清除按钮事件
            clearBtn.addEventListener('click', function() {
                resultContainer.style.display = 'none';
                fishImage.src = '';
            });
            sendMessage.addEventListener('click', function() {
                const question = userInput.value.trim();
                if (question) {
                    // 添加用户消息到聊天窗口
                    addToChat(question, 'user');
                    
                    // 清空输入框
                    userInput.value = '';
                    
                    // 发送请求到后端
                    fetch('/ask', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({ question: question })
                    })
                    .then(response => response.json())
                    .then(data => {
                        addToChat(data.answer, 'bot');
                    })
                    .catch(error => {
                        addToChat('抱歉，获取答案时出错，请稍后再试', 'bot');
                        console.error('Error:', error);
                    });
                }
            });

            // 回车键发送消息
            userInput.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    sendMessage.click();
                }
            });

            function addToChat(message, type) {
                const messageElement = document.createElement('div');
                messageElement.classList.add('chat-message', type === 'user' ? 'user-message' : 'bot-message');
                messageElement.textContent = message;
                chatContainer.appendChild(messageElement);
                chatContainer.scrollTop = chatContainer.scrollHeight;
            }
        });
        
    </script>
        </div>
    </div>
    </div>
</body>
</html>